<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
   本地存储sessionstorage
  key:<input type="text" value="" class="key">
  value:<input type="text" value="" class="val">
  <input type="button" value="设置" class="set">
  <input type="button" value="获取" class="get">
  <input type="button" value="删除" class="del">
  <input type="button" value="清空" class="cle">
<script>
  var set = document.querySelector('.set');
  var get = document.querySelector('.get');
  var del = document.querySelector('.del');
  var cle = document.querySelector('.cle');
  var key = document.querySelector('.key');
  var val = document.querySelector('.val');
  set.onclick = function(){
    //设置(添加,保存)通过键和值的形式进行设置
    window.sessionStorage.setItem(key.value,val.value);
  }
  get.onclick = function(){
    //获取(获取本地储存的值)通过键进行获取
    window.sessionStorage.getItem(key.value);
    console.log(sessionStorage.getItem(key.value));
  }
  del.onclick = function(){
    //删除(删除本地储存数据)通过键进行删除
    window.sessionStorage.removeItem(key.value);
  }
  cle.onclick = function(){
    //清空,删除所有本地数据
    window.sessionStorage.clear();
  }
</script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  本地存储localStorage 
  key:<input type="text" class="key">
  value:<input type="text" class="val">
  <input type="button" value="设置" class="set">
  <input type="button" value="获取" class="get">
  <input type="button" value="删除" class="del">
  <input type="button" value="清空" class="cle">
  <script>
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var del = document.querySelector('.del');
    var cle = document.querySelector('.cle');
    var key = document.querySelector('.key');
    var val = document.querySelector('.val');
    set.onclick = function(){
      //设置
      localStorage.setItem(key.value,val.value);
    }
    get.onclick = function(){
      //获取
      localStorage.getItem(key.value);
      console.log(localStorage.getItem(key.value));
    }
    del.onclick = function(){
      //删除
      localStorage.removeItem(key.value);
    }
    cle.onclick = function(){
      //清空
      localStorage.clear();
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div></div>
  <script>
    alert(123);
    window.alert(123);
    function fn(){
      alert(123);
    }
    fn();
    window.fn();
    document.querySelector('div');
    window.document.querySelector('div');
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  页面加载事件
  <div></div>
  <script>
    var div = document.querySelector('div');
    console.log(div)
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
  <script>
    //当页面所有的html标签,css代码,js代码等等资源都加载完毕后触发onload事件
    window.onload = function(){
      var div = document.querySelector('div');
      console.log(div);
    }
  </script>
</head>
<body>
  <div></div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    //定时器 setTimeout()中有三个参数 setTimeout(func,delay[ lang])
    //定时器：相当于一个定时炸弹(只执行一次)
    //第一个参数：是一个回调函数(代表一个执行程序 function),将函数作为参数使用称为回调函数
    //第二个参数：代表延时的时间(单位毫秒 1秒 = 1000毫秒)
    setTimeout(function(){
      alert('这是一个setTimeout定时器')
    },5000);
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 <style>
   div{
     width: 200px;
     height: 200px;
     background-color: pink;
     display: none;
   }
 </style>
</head>
<body>
  <input type="button" value="点击注册">
  <div>2秒后我消失 恭喜注册成功</div>
  <script>
    var input = document.querySelector('input');
    var div = document.querySelector('div')
    input.onclick = function(){
      div.style.display = 'block';
      setTimeout(function(){
        div.style.display = 'none';
      },2000)
    }
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    //每个一秒弹出一个alert(1) 使用定时器 setInterval(func,interval[,args])
    //定时器：相当于一个闹钟(每隔多长时间执行一次)
    //参数一：是一个回调函数(代表一个执行程序 function)
    //参数二：执行时间：隔多长时间执行(单位毫秒 1秒 = 1000毫秒)

    setInterval(function(){
      alert(1)
    },1000)
    //如果希望将该定时器停止,不再执行,可以通过clearInterval()方法实现
    clearInterval(id)
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var a = setTimeout(function(){
      alert('clearTime()可以清除我')
    },2000);

    clearTimeout(a);
  </script>

  <script>
   var b = setInterval(function(){
      alert('clearInterval()可以清除我')
    },2000);

    clearInterval(b)
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="button" value="开始" id ="start">
  <input type="button" value="停止" id ='stop'>
  <input type="text" value="0" >
  <script>
    var start = document.getElementById('start');
    var stop = document.getElementById('stop');
    var input = document.querySelector('input:nth-child(3)');
    var num = 0;
    start.onclick = function(){
      a = setInterval(function(){
        input.value = num -= 1;
      },1000)
    
    };
    
    stop.onclick = function(){
      clearInterval(a);
    };  
  </script>
</body>
</html>  -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="button" value="点击获取当前页面的路径">
  <script>
    var btn = document.querySelector('input');
    btn.onclick = function(){
      //获取当前页面的路径
      alert(location.href);
    }
  </script> 
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="button" value="点击跳转页面">
  <script>
    var btn = document.querySelector('input');
    btn.onclick = function(){
      location.href = 'https://www.baidu.com/';
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="https://www.baidu.com/">我是a标签 点击后在本页面打开百度</a>
  <a href="https://www.baidu.com/" target="_blank">我是a标签 点击新打开一个百度的页面</a>
  <a href="http://www.baidu.com" target="哈呼">我是a标签 自定义一个名字也 也可以新打开一个百读页面</a>

_Blank是新窗口
_Self是自身
_Parent是父窗口
_Top是顶层窗口
也可以是自定义的一个'任意的'的名字 如'哈呼'
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="button" value="跳转">
  刷新页面 与F5效果一样
  如果reload(true),代表要从服务器端重新获取数据 刷新页面 ctrl+F5
  如果reload(false),代表从本地缓存中获取数据 F5
  <script>
    var btn = document.querySelector('input');
    btn.onclick = function(){
      alert(location.post)
    }
  </script>
  <script>
   var btn = document.querySelector('input');
   btn.onclick = function(){
     location.reload(false);
   }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="12.html">跳转到12页面</a>
  <input type="button" value="前进">
  <script>
    var input = document.querySelector('input');
    input.onclick = function(){
      //方法一
      history.forward();
      //方法二
      history.go(1);
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    height: 300px;
    width: 300px;
    background-color: red;
    margin-left: 100px;
    margin-top: 100px;
    position: relative;
  }
  .one{
    height: 100px;
    width: 100px;
    margin-left: 10px;
    background-color: blue;
    border: 10px solid green;
    padding: 20px;
  }
</style>
</head>
<body>
  <div class="box">
    <div class="one"></div>
  </div>
  <script>
    var box = document.querySelector('.box');
    var one = document.querySelector('.one');
    console.log(one.offsetLeft);
    console.log(one.offsetWidth);
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
  }
  .box{
    width: 300px;
    height: 300px;
    background-color: black;
    margin-left: 100px;
    margin-top: 100px;
  }
  .one{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-left: 2px solid green;
    border-right: 5px solid pink;
    border-top: 3px solid yellow;
    border-bottom: 1px solid orange;
    padding-left: 30px;
  }
</style>
<body>
  <div class="box">
    <div class="one"></div>
  </div>
  <script>
    var one = document.querySelector('.one');
    console.log(one.clientLeft,one.clientTop);
    console.log(one.clientWidth,one.clientHeight);
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;
      height: 300px;
      background-color: pink;
      margin-top: 100px;
      margin-left: 100px;
      overflow: scroll;
      padding: 10px;
      border: 5px solid red
    }
    .one{
      width: 100px;
      height: 400px;
      background-color: blue;
     
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="one">出现滚动条啦</div>
  </div>
  <script>
    var box = document.querySelector('.box');
    var one = document.querySelector('.one');
    //总结：
    // 1如果当前元素有滚动条,那么scrollWidth获取到的值不包括滚动条自己的宽度
    // 2如果父元素中的子元素宽度比父元素还要大,那么通过scrollWidth/scrollHeight获取就是子元素撑开的 宽度/高度 例如 one盒子高度 400px
    console.log(box.scrollWidth);
    box.onscroll = function(){
      console.log(box.scrollTop);
      console.log(box.scrollLeft);
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
      position:absolute;
    }
  </style>
</head>
<body>
  <input type="button" value="向右移动400px">
  <div class="box"></div>
  <script>
    var input = document.querySelector('input');
    var box = document.querySelector('.box');
    var start_x = box.offsetLeft;
    var target_x = 400;
    var step = 10;
    var time_id = null;
    input.onclick = function(){
      //保证页面中只有一个定时器(一个time_id)这样页面的元素在一直点击的情况下不会出现加速现象
        if(time_id){
          clearInterval(time_id);
          time_id = null;
        };
        time_id = setInterval(function(){
        start_x = box.offsetLeft
        if(start_x >= target_x){
          start_x = target_x; 
          clearInterval(time_id);
        }else{
          start_x += step;
        }
        box.style.left = start_x + 'px';
      },30);
    };
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <input type="button" value="向右移动400">
  <div class="box"></div>
  <script>
   var input = document.querySelector('input');
   var box = document.querySelector('.box');
   var start_x = box.offsetLeft;
   var target_x = 400;
   var step = 10;
   var time_id = null;
   input.onclick = function(){

      animation(box,start_x,target_x,step);
   };
   function animation(element,current,target,step){
      if(time_id){
          clearInterval(time_id);
          time_id = null;
      }
      time_id = setInterval(function(){
        if(current >= target){
          current = target;
          clearInterval(time_id)
        }else{
          current += step;
        }
        element.style.left = current + 'px';
      },30);
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: relative;
    }
  </style>
</head>
<body>
  <input type="button" value="移动">
  <div class="box1"></div>
  <div class="box2"></div>
  <script type="text/javascript" src="animation.js"></script>
  <script>
    var input = document.querySelector('input');
    var box1 = document.querySelector('.box1');
    var box2 = document.querySelector('.box2');
    input.onclick = function(){
      animate(box1,box1.offsetLeft,400,10);
      animate(box2,box2.offsetLeft,800,20);
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      position:absolute;
    }
  </style>
</head>
<body>
  <input type="button" value="移动400">
  <input type="button" value="移动800">
  <div class="box1"></div>
  <script type="text/javascript" src="animation2.js"></script>
  <script>
    var input400 = document.querySelector('input:nth-child(1)');
    var input800 = document.querySelector('input:nth-child(2)');
    var box1 = document.querySelector('.box1');
    input400.onclick = function(){
      animate(box1,box1.offsetLeft,400,20);
    };
    input800.onclick = function(){
      animate(box1,box1.offsetLeft,800,20);
    };
  </script>
</body>   
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: relative;
    }
  </style>
</head>
<body>
  <input type="button" value="移动400">
  <input type="button" value="移动800">
  <div class="box1"></div>
  <div class="box2"></div>
  <script>
    var btn_400 = document.querySelector('input:nth-child(1)');
    var btn_800 = document.querySelector('input:nth-child(2)');
    var box1 = document.querySelector('div:nth-child(3)');
    var box2 = document.querySelector('div:nth-child(4)');
    btn_400.onclick = function(){
      animate(box1,box1.offsetLeft,400,20);
      animate(box2,box2.offsetLeft,800,10);
    };
    btn_800.onclick = function(){
      animate(box1,box1.offsetLeft,800,20);
      animate(box2,box2.offsetLeft,400,10);
    };
    var time_id = null;
    function animate(element,current,target,step){
      if(element.time_id){
        clearInterval(element.time_id);
        element.time_id = null;
      };
      element.time_id = setInterval(function(){
        if(current > target){
          step = - Math.abs(step);
        };
        if(Math.abs(current-target) <= Math.abs(step)){
          current = target;
          clearInterval(element.time_id);
        }else{
          current += step;
        };
        element.style.left = current + 'px';
      },30);
    };
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;
      height: 300px;
      background-color: pink;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    var box = document.querySelector('.box');
    //给元素注册一个鼠标按下去的事件
    box.onmousedown = function(e){
      //先确定鼠标按下去的时候,鼠标在当前盒子的位置
      //鼠标在盒子中的位置 = 鼠标在在页面中的位置 - 当前盒子的位置
      var mouse_x = e.pageX - this.offsetLeft;
      var mouse_y = e.pageY - this.offsetTop;
      //鼠标按下去的同时 元素box是在整个页面中移动 所以要给document注册鼠标移动事件
      document.onmousemove = function(e){
        box.style.left = e.clientX - mouse_x + 'px';
        box.style.top = e.clientY - mouse_y + 'px';
      };
    };
    //给盒子设置一个鼠标弹起事件
    box.onmouseup = function(){
      //移除盒子box在document中的移动事件
      document.onmousemove = null;
    };
  </script>
</body>
</html> -->
